<template>
    <a-row id="globalHeader" align="center" :wrap="false">
        <a-col flex="auto">
            <!-- 第三步：@menu-item-click 绑定事件，实现点击导航栏页面跳转,看官方文档 -->
            <!-- 第四步：:selected-keys=""动态变量 -->
            <a-menu
                mode="horizontal"
                :selected-keys="selectedKeys"
                @menu-item-click="doMenuClick"
            >
                <a-menu-item
                    key="0"
                    :style="{ padding: 0, marginRight: '38px' }"
                    disabled
                >
                    <div class="title-bar">
                        <img class="logo" src="../assets/img.png" alt="" />
                        <div class="logo-text">Amelia</div>
                    </div>
                </a-menu-item>
                <!-- 第二步：菜单组件读取路由，动态渲染菜单项 -->
                <!-- <a-menu-item v-for="item in routes" :key="item.path"> -->
                <a-menu-item v-for="item in visibleRoutes" :key="item.path">
                    {{ item.name }}
                </a-menu-item>
            </a-menu>
        </a-col>
        <a-col flex="100px">
            <div>{{ store.state.user?.loginUser?.userName ?? "未登录" }}</div>
        </a-col>
    </a-row>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { routes } from "../router/routes";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import checkAccess from "@/access/checkAccess";
import ACCESS_Enum from "@/access/accessEnum";

const router = useRouter();
const store = useStore();
const loginUser = store.state.user.loginUser;
//第三步：导航栏页面跳转
//const router = useRouter();
const doMenuClick = (key: string) => {
    router.push({
        path: key,
    });
};
//显示在菜单的路由数组
//要用computed动态属性，要不然权限更改后，导航栏不会显示隐藏的按钮【根据里面值的变化动态显示按钮】
const visibleRoutes = computed(() => {
    return routes.filter((item, index) => {
        if (item.meta?.hideInMenu) {
            return false;
        }
        // 根据权限过滤菜单
        if (
            !checkAccess(
                store.state.user.loginUser,
                item?.meta?.access as string
            )
        ) {
            return false;
        }
        return true;
    });
});

// 第四步
//默认主页
const selectedKeys = ref(["/"]);
//路由跳转后，更新要选中的菜单项,beforeEach这个要加next
router.afterEach((to, from, next) => {
    selectedKeys.value = [to.path];
});

//获取已存储的状态变量
//const store = useStore();
console.log(store.state.user.loginUser);
setTimeout(() => {
    store.dispatch("user/getLoginUser", {
        userName: "Amelia管理员",
        userRole: ACCESS_Enum.ADMIN,
    });
}, 3000);
</script>

<style scoped>
#sglobalHeader {
    box-sizing: border-box;
    width: 100%;
    padding: 40px;
    background-color: var(--color-neutral-2);
}
.title-bar {
    /* 左右布局 */
    display: flex;
    /* 居中 */
    align-items: center;
}
.logo {
    height: 48px;
    width: 54px;
}
.logo-text {
    color: #444;
    font-size: 19px;
    font-weight: 180;
    margin-left: 12px;
}
</style>
